<template>
	<view>
		<view class="temImageBox">
			<image class="temImage" :src="captchaSrc" mode="aspectFit"></image>
		</view>
		<!-- canvas -->
		<canvas class="mycanvas" canvas-id="canvas_sign" @touchstart="touchstart" @touchmove="touchmove"
			@touchend="touchend" disable-scroll="true"></canvas>
		<div class="Rotation">
			<button class="van-button-css" plain type="warn" @click="close">取消</button>
			<div style="flex: 1;display: flex;justify-content: flex-end;">
				<button v-if="showSign" class="van-button-css" plain type="primary" style="margin-right: 8px"
					@click="finish('sign')">使用预制签名</button>
				<button class="van-button-css" plain type="primary" style="margin-right: 8px"
					@click="clear(true)">清空</button>
				<button class="van-button-css" plain type="primary" @click="finish">确认</button>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			showSign: {
				default: false,
				require: false,
				type: Boolean
			}
		},
		name: "sign",
		data() {
			return {
				canvasCtx: '', //绘图图像
				points: [], //路径点集合
				hasSign: false,
				isInit: false,
				nameBG: ''
			}
		},
		computed: {
			captchaSrc() {
				if (this.nameBG) return 'data:image/jpeg;base64,' + this.nameBG.replace(/[\r\n]/g, "")
				else return '../static/temImage.png'
			}
		},
		mounted() {
			this.nameBG = uni.getStorageSync('nameBG')
			this.canvasCtx = uni.createCanvasContext('canvas_sign', this) //创建绘图对象
			//设置画笔样式
			this.canvasCtx.lineWidth = 4
			// 设置线条的端点样式
			this.canvasCtx.lineCap = 'round'
			// 设置线条的交点样式
			this.canvasCtx.lineJoin = 'round'
		},
		methods: {
			touchstart(e) {
				if (!this.isInit) {
					this.isInit = true
					this.clear();
				}
				let startX = e.changedTouches[0].x
				let startY = e.changedTouches[0].y
				let startPoint = {
					X: startX,
					Y: startY
				}
				this.points.push(startPoint)
				//每次触摸开始，开启新的路径
				this.canvasCtx.beginPath()
			},
			touchmove(e) {
				let moveX = e.changedTouches[0].x
				let moveY = e.changedTouches[0].y
				let movePoint = {
					X: moveX,
					Y: moveY
				}
				this.points.push(movePoint) //存点
				let len = this.points.length
				if (len >= 2) {
					this.draw() //绘制路径
				}
			},
			touchend() {
				this.points = [];
				this.canvasCtx.draw(true)
			},
			draw() {
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.canvasCtx.moveTo(point1.X, point1.Y)
				this.canvasCtx.lineTo(point2.X, point2.Y)
				this.canvasCtx.stroke()
				this.canvasCtx.draw(true)
				this.hasSign = true
			},
			clear() {
				let that = this;
				this.hasSign = false
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.canvasCtx.clearRect(0, 0, canvasw, canvash);
						that.canvasCtx.draw(true);
					}
				});
			},
			finish(e) {
				if (e == 'sign') {
					let userInfo = uni.getStorageSync('userInfo')
					if (!userInfo.sign) return uni.showToast({
						icon: 'none',
						title: '暂未设置签名,请手动签字'
					})
					this.clear()
					this.$emit('finish', '1')
					return
				}
				let that = this;
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'canvas_sign',
						success: res => {
							console.log(res);
							this.pathToBase64WX(res.tempFilePath, (base64) => {
								// console.log(base64);
								that.$emit('finish', base64)
							})
						},
					}, this)
				}, 200)
			},
			close() {
				this.$emit('close', '1')
			},
			pathToBase64WX(path, callback) {
				uni.getFileSystemManager().readFile({
					filePath: path, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => {
						// 成功的回调
						let base64 = 'data:image/jpeg;base64,' + res.data;
						typeof callback == 'function' && callback(base64);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.temImageBox {
		position: fixed;
		top: 0;
		right: 0;
		/* z-index: 9999; */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.temImage {
		width: 100%;
		height: 100%;
	}

	.mycanvas {
		width: 100%;
		height: calc(100vh - 44px);
		background-color: transparent;
	}

	.Rotation {
		border-top: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		text-align: center;
	}

	.van-button-css {
		border-radius: 10px;
		height: 36px;
		line-height: 34px;
		font-size: 14px;
		min-width: 64px;
		margin: 0;
	}
</style>